<template>
  <div>
    <el-form label-width="200px">
      <el-form-item label="SKU名称">
        <el-input
          v-model="addSKUParamsObj.skuName"
          style="width: 600px"
        ></el-input>
      </el-form-item>
      <el-form-item label="SKU价格(元)">
        <el-input
          v-model="addSKUParamsObj.price"
          style="width: 600px"
          type="number"
        ></el-input>
      </el-form-item>
      <el-form-item label="SKU重量(克)">
        <el-input
          v-model="addSKUParamsObj.weight"
          style="width: 600px"
          type="number"
        ></el-input>
      </el-form-item>
      <el-form-item label="SKU描述">
        <el-input
          v-model="addSKUParamsObj.skuDesc"
          style="width: 600px"
          type="textarea"
          placeholder="请输入SKU描述"
        ></el-input>
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form label-width="100px" inline>
          <el-form-item
            v-for="item in attrAttributeList"
            :key="item.id"
            :label="item.attrName"
          >
            <el-select v-model="item.skuParamsNVM" style="width: 300px">
              <el-option
                v-for="opvalue in item.attrValueList"
                :key="opvalue.id"
                :value="`${opvalue.id}:${item.id}`"
                :label="opvalue.valueName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="商品属性">
        <el-form inline>
          <el-form-item
            v-for="item in attrAttributeAndValue"
            :key="item.baseSaleAttrId"
            :label="item.saleAttrname"
          >
            <el-select v-model="item.skuParamsNVM2" style="width: 300px">
              <el-option
                v-for="opitem in item.spuSaleAttrValueList"
                :key="opitem.id"
                :value="`${item.baseSaleAttrId}:${opitem.id}`"
                :label="opitem.saleAttrValueName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片名称">
        <el-table ref="tableRadio" :data="photoSumList">
          <el-table-column align="center" type="selection"> </el-table-column>
          <el-table-column align="center" label="图片">
            <template #="{ row }">
              <img
                style="width: 200px; height: 200px"
                :src="row.imgUrl"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column prop="imgName" align="center" label="名称">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template #="{ row, $index }">
              <el-button
                @click="btnRadio(row)"
                :type="row.isDefault ? 'primary' : 'danger'"
                size="small"
                >{{ row.isDefault ? "已选中" : "设为默认" }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button @click="btnOK" type="primary">保存</el-button>
        <el-button @click="btnCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { defineEmits, nextTick, ref } from "vue";
import { reqGetProductBaseList } from "@/api/product/attributes";
import {
  getSPUAttributeAndValue,
  getSPUPhotosList,
  addSKUAPI,
} from "@/api/product/spu";
import type { SPUImageList, SPUAttributeListAPI } from "@/api/product/type/spu";
import type { productAttributeData } from "@/api/product/type/type";
import { ElMessage } from "element-plus";

const emit = defineEmits(["SKUPagescene2"]);
//取消按钮场景切换
const btnCancel = () => {
  emit("SKUPagescene2", 0);
};
//添加SKU接口参数
const addSKUParamsObj = ref<any>({
  category3Id: "", //三级分类的ID
  spuId: "", //SPU的ID
  tmId: "", //SPU归属于哪一个品牌
  //以下三个v-model直接获取
  skuName: "", //SKU名字
  price: "", //SKU价格
  weight: "", //SKU重量
  skuDesc: "", //SKU商品的描述
  skuDefaultImg: "", //默认图片的地址

  skuAttrValueList: [
    //收集平台属性的数据
    {
      attrId: "", //平台属性的ID
      valueId: "", //平台属性值的ID
    },
  ],
  skuSaleAttrValueList: [
    //收集销售属性
    {
      saleAttrId: "", //销售属性的ID

      saleAttrValueId: "", //属性值的ID
    },
  ],
});
//存储table实例
const tableRadio = ref();
//存储平台属性数据数组
const attrAttributeList = ref<productAttributeData>([]);
//存储已有的商品属性和属性值数组
const attrAttributeAndValue = ref<SPUAttributeListAPI>([]);
//存储照片墙数据
const photoSumList = ref<SPUImageList>([]);
//获取平台属性，商品属性和照片墙数据()
const getBaseData = async (c1Id: any, c2Id: any, row: any) => {
  //存储数据
  addSKUParamsObj.value.category3Id = row.category3Id;
  addSKUParamsObj.value.spuId = row.id;
  addSKUParamsObj.value.tmId = row.tmId;

  //请求获取平台属性接口
  const res1: productAttributeData = await reqGetProductBaseList(
    c1Id,
    c2Id,
    row.category3Id
  );
  attrAttributeList.value = res1;
  // console.log(row);

  //请求获取已有的属性和属性值接口数据
  const res2: SPUAttributeListAPI = await getSPUAttributeAndValue(row.id);

  attrAttributeAndValue.value = res2;
  //请求照片墙数据
  const res3 = await getSPUPhotosList(row.id);

  photoSumList.value = res3;
  //照片墙不为空的话
  if (photoSumList.value.length) {
    for (let a = 0; a < photoSumList.value.length; a++) {
      //初始化数据
      photoSumList.value[a].isDefault = false;
      //radio单选框选中
      //第一项是数组的数组,第二个为true就勾选，false就不勾选
      tableRadio.value.toggleRowSelection(photoSumList.value, false);
    }
    //默认第一项为选中项
    photoSumList.value[0].isDefault = true;
    //radio单选框选中
    //第一项是数组的数组,第二个为true就勾选，false就不勾选
    nextTick(() => {
      tableRadio.value.toggleRowSelection(photoSumList.value[0], true);
    });
    //存储默认照片地址
    addSKUParamsObj.value.skuDefaultImg = photoSumList.value[0].imgUrl;
  }
};
//添加SKU提交按钮//在提交按钮之前筛选数据便于请求接口
const btnOK = async () => {
  //筛选平台属性
  addSKUParamsObj.value.skuAttrValueList = attrAttributeList.value.reduce(
    (prev: any, cur: any) => {
      if (cur.skuParamsNVM) {
        const [attrId, valueId] = cur.skuParamsNVM.split(":");
        prev.push({ attrId, valueId });
      }
      return prev;
    },
    []
  );
  //筛选商品属性
  addSKUParamsObj.value.skuSaleAttrValueList =
    attrAttributeAndValue.value.reduce((prev: any, cur: any) => {
      if (cur.skuParamsNVM2) {
        const [saleAttrId, saleAttrValueId] = cur.skuParamsNVM2.split(":");
        prev.push({ saleAttrId, saleAttrValueId });
      }
      return prev;
    }, []);
  await addSKUAPI(addSKUParamsObj.value);
  ElMessage({
    type: "success",
    message: "添加SKU成功!",
  });
  emit("SKUPagescene2", 0);
};
//照片墙按钮函数
const btnRadio = (row: any) => {
  for (let a = 0; a < photoSumList.value.length; a++) {
    console.log(row);

    photoSumList.value[a].isDefault = false;
    tableRadio.value.toggleRowSelection(photoSumList.value[a], false);
    //存储照片地址
    addSKUParamsObj.value.skuDefaultImg = row.imgUrl;
  }

  row.isDefault = true;
  tableRadio.value.toggleRowSelection(row, true);
};

defineExpose({
  getBaseData,
});
</script>

<style scoped></style>
